//创建一个路由器并暴露出去

//第一步 引入 createRouter
import { createRouter,createWebHashHistory, createWebHistory} from 'vue-router'

//第二步，引入一个一个组件
import Home from '@/pages/Home.vue'
import About from '@/pages/About.vue'
import News from '@/pages/News.vue'
import Detail from '@/pages/Detail.vue'

//第三步，创建路由器
const router = createRouter({

    // 有两种模式 一种历史模式  一种hash模式
    // history:createWebHistory(),
    // 历史模式就是url 上面不带 # 便于理解和 seo ，但是需要后端服务配合更改路由
    // hash模式就是不用后端服务配置，然后url 是带#的的
    history:createWebHistory(),
    routes:[
        {
            name:'zhuye',
            path:'/home',
            component:Home
        },
        {
            name:'guanyu',
            path:'/about',
            component:About
        },
        {
            name:'xinwen',
            path:'/news',
            component:News,
            // 嵌套路由
            children:[
                {
                    name:"ziyemian",
                    //这个是使用params 的写法
                    path:"detail/:id/:title/:content",
                    //这个是query 的写法
                    // path:"detail",
                    component: Detail,
                    // props 开启之后可以在组件传递接收那里可以直接看出来
                    props:true
                }
            ]
        }
    ]

})


//将路由器暴露出去
export default router

